<template>
  <div class="common-layout">
    <el-header class="header-box">彩色负片管理系统</el-header>
    <el-container>
      <el-main width="200px">
        <el-tabs v-model="activeName" class="demo-tabs custom-tabs" tab-position="left">
          <el-tab-pane label="首页" name="first"> <frontPage /></el-tab-pane>
          <el-tab-pane label="负片处理" name="second"><processTab /></el-tab-pane>
          <el-tab-pane label="处理记录" name="third"><historyTab /></el-tab-pane>
          <el-tab-pane label="用户管理" name="fourth"><userManagement /></el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import frontPage from './viewTabs/frontPage.vue'
import processTab from './viewTabs/processTab.vue'
import historyTab from './viewTabs/historyTab.vue'
import userManagement from './viewTabs/userManagement.vue'

const activeName = ref('first')
</script>

<style scoped>
.common-layout {
  height: 100%;
  width: 100%;
}
.header-box {
  background-color: #ebf1f3;
  color: #29bcf7;
  font-size: 24px;
  font-weight: 800;
  line-height: 60px;
  text-align: center;
  border: 1px solid #f2f3f3;
  border-radius: 5px;
  margin-top: -10px;
}
.demo-tabs {
  height: 89vh;
}
.custom-tabs >>> .el-tabs__item {
  font-size: 20px !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  font-weight: bolder !important;
}
</style>
